<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/templet.css?01_24" />
		<link rel="stylesheet" type="text/css" href="../fonts/font-awesome.min.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.css?01_38" />
		<link rel="stylesheet" type="text/css" href="../css/switch.css?01_38" />
		<!--公共js-->
		<script type="text/javascript" src="../common/js/jquery.js?01_38"></script>
		<script type="text/javascript" src="../common/js/fastclick.js?01_38"></script>
		
		<!--插件-->
		<script type="text/javascript" src="../common/js/vue.min.js?01_38"></script>
		<script type="text/javascript" src="../common/js/mui.min.js?01_38"></script>
		
		<script type="text/javascript" src="../common/js/common.js?01_38"></script>
		<script type="text/javascript" src="../common/js/main.js?01_38"></script>
		<script type="text/javascript" src="../common/js/app.js?01_38"></script>
	</head>

	<body class="bg-f5f4f4">
		<header class="bg-red9 fff f-20 pad-t-10 pad-b-10  pad-r-10">
			<div class="pa back pad-l-10 re" onclick="back()">
				<div class="order_back"></div>
				<a></a>
			</div>
			<div class="center" data-l="1426"></div>
		</header>
		<div id="app" class="wrap_body order_det" v-cloak>
			<div style="height: 45px;"></div>
			<div class="title bg-fff">
				<div class="mag-b-5 c666 f-16 fiex ">
					<div>
						<span>{{b_lg[1272]}} : </span>
						<span>{{result.info.addtime}}</span>
					</div>
					<div class="fiex1">
						<div class="fr fiex f-18">
							<div v-if="result.info.status==2" class="load mag-r-5"><img src="../images/yuyue.jpg" /></div>
							<div v-if="result.info.status==2" style="max-width: 75px;" class="c20e ellipsis">{{b_lg[1408]}}</div>
							<div v-if="result.info.status!=2" class="load mag-r-5"><img src="../images/clos.jpg" /></div>
							<div v-if="result.info.status!=2" style="max-width: 75px;" class="c666 ellipsis">{{result.info.status|capitalize}}</div>
						</div>
					</div>

				</div>
				<div class="f-16 c666">
					<span>{{b_lg[1417]}} : </span>
					<span>{{result.info.id}}</span>
				</div>
				<div class="fiex1">
					<div class="fr"></div>
				</div>
			</div>
			<div class="ord_order_box bg-fff f-16">
				<div class="fiex mag-b-10">
					<div class="f-18">{{b_lg[1418]}}</div>
				</div>
				<div class="mag-b-5" >
					<span class="c98">{{b_lg[1419]}} : </span>
					<span>{{result.info.name}}</span>
				</div>
				<div class="mag-b-5">
					<span class="c98">{{b_lg[1420]}} : </span>
					<span >{{result.info.mobile}}</span>
				</div>
				<div class="mag-b-5">
					<span class="c98">{{b_lg[1411]}} : </span>
					<span>{{result.info.time}}</span>
				</div>
				<div class="mag-b-5">
					<span class=" c98">{{b_lg[1412]}} : </span>
					<span>{{result.info.people_count}}</span>
				</div>
				<div class="mag-b-5">
					<span class=" c98">{{b_lg[1421]}} : </span>
					<span>{{result.info.deposit}}</span>
				</div>
				<div>
					<span class=" c98">{{b_lg[1292]}} : </span>
					<span>{{result.info.description}}</span>
				</div>
			</div>
			<div class="pad-t-10">
				<div v-if="result.info.table_name.length!=0" class="table">
					<div class="f-18 mag-b-10">{{b_lg[1422]}}</div>
					<ul class="list f-15">
						<li v-for="(v,k) in result.info.table_name">{{v}}</li>
					</ul>
				</div>
				<div v-if="result.goods_list.length!=0" class="food">
					<div class="f-18 mag-b-10 pad-l-15">{{b_lg[1423]}}</div>
					<ul class="list f-15 bg-fff">
						<li v-for="(v,k) in result.goods_list" class="fiex">
							<div class="fiex1">{{k+1}}</div>
							<div class="fiex2">
								<div>
									<div class="f-16 mag-b-5">{{v.goods_name}}</div>
									<div class="c999 mag-b-5">{{v.remarks}}</div>
									<div v-for="(v2,k2) in v.garnish_ids" class="c999 mag-b-5">{{v2.goods_garnish_name}}<span class="red9"> X{{v2.count}}</span></div>
								</div>
							</div>
							<div class="fiex1 f-15">x{{v.count}}</div>
							<div class="fiex1 red9">{{v.goods_price}}</div>
						</li>
					</ul>
				</div>
				<div v-if="result.log_list.length!=0" class="rizhi">
					<div class="f-18 mag-b-10 pad-l-15">{{b_lg[1424]}}</div>
					<div v-for="(v,k) in result.log_list" class="fiex bg-fff f-16">
						<div v-if="v.type==1">{{b_lg[1427]}}</div>
						<div v-else-if="v.type==2">
							{{v.status|capitalize}}
						</div>
						<div v-else-if="v.type==3">{{v.description}}</div>
						<div class="fiex1">
							<div class="fr">
								<div class="f-right">{{v.nickname}}</div>
								<div class="f-right">{{v.addtime}}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			var app = null,
				order_id = ""; //预约id

			order_id = getQueryString("id")

			function fun1() {
				setlange_obj(); //加载头部语言包
				app = new Vue({
					el: '#app',
					data: {
						result: {}, //接口返回的结果
						b_lg: global_lange, //语言包
					},
					filters: {
						capitalize: function(value) {
							switch(value) {
								case '1':
									return global_lange['1339']
								case '2':
									return global_lange['1428']
								case '3':
									return global_lange['1429']
								case '4':
									return global_lange['1430']
								case '5':
									return global_lange['1431']
								case '6':
									return global_lange['1432']
							}
							return value.slice(5)
						}
					},
					methods: {
						init: function() { //首次加载调用方法
							common_ajax("1", {
								'id': order_id
							}, "get_subscribe_info", function(h) { //获取预约详细信息
								app.result = h.result
							})
						}
					}
				})
				app.init()
			}
		</script>
	</body>

</html>
